<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules">
      <a-form-model-item label="团员" prop="memberId">
        <a-select v-model="form.memberId" placeholder="团员">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="金额" prop="money">
        <a-input v-model="form.money" placeholder="金额" type="number" />
      </a-form-model-item>

      <a-form-model-item :label="(form.type == 1? '缴费': '使用') + '日期'" prop="birthday">
        <a-date-picker
          style="width: 100%"
          v-model="form.expectedTime"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          :placeholder="(form.type == 1? '缴费': '使用') + '日期'"
        />
      </a-form-model-item>
      <a-form-model-item label="事项" prop="name">
        <a-input v-model="form.name" placeholder="事项" />
      </a-form-model-item>

      <a-form-model-item label="类型" prop="type" v-show="false">
        <a-select v-model="form.type" placeholder="级别" disabled>
          <a-select-option :value="1"> 缴费 </a-select-option>
          <a-select-option :value="2"> 使用 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="地点" prop="education">
        <a-input v-model="form.address" placeholder="地点" />
      </a-form-model-item>
      <a-form-model-item label="说明" prop="note" v-if="form.type == 1">
        <a-input v-model="form.note" placeholder="说明" />
      </a-form-model-item>
      <a-form-model-item label="申请理由" prop="reason" v-if="form.type == 2">
        <a-input v-model="form.reason" placeholder="申请理由" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    let validateMoney = (rule, value, callback) => {
      let money = -1;
      try{
        money = parseFloat(this.form.money)
      } catch(err){
        console.log(err);
      }
      if (money >= 0) {
        callback();
        } else {
        callback(new Error('金额输入有误'));
      }
    };
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      rules: {
        memberId: [{required: true, message: '请输入团员', trigger: 'blur'}],
        money: [{required: true, message: '请输入金额', trigger: 'blur'},{validator: validateMoney, trigger: 'blur'}],
        name: [{required: true, message: '请输入事项', trigger: 'blur'}],
        reason: [{required: true, message: '请输入申请理由', trigger: 'blur'}],
      },
      listData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    init(){
    this.form.type =1
    },
    getList() {
      this.$ajax({
        url: this.$api.member.findList,
        data: {status: "2"},
        success: (result) => {
          this.listData = result;
        },
        fail: (err) => {
          this.$message.success(err);
        },
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.cost.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit("pass", null);
              // this.$router.push(`/member/list`);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit("reject", null);
            },
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 108px !important;
  .header {
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content {
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
  }
  .footer {
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
